<template>
		<nav class="navbar navbar-default">
			<div class="container">

				<div class="navbar-header">
					<router-link class="navbar-brand" to="/">Vue-SPA</router-link>
				</div>

				<div class="collapse navbar-collapse" >
					<ul class="nav navbar-nav navbar-right">
						<li>
							<router-link v-if="!user.authenticated" to="/login">
								登陆
							</router-link>
						</li>
						<li>
							<router-link v-if="!user.authenticated" to="/register">
								注册
							</router-link>
						</li>
						<li>
							<router-link v-if="user.authenticated" to="/profile">
								个人中心
							</router-link>
						</li>
						<li v-if="user.authenticated">
							<a href="#">退出</a>
						</li>
						<router-link to="/about" tag="li"><a>About</a></router-link>

					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
</template>

<script>
	import {mapState} from 'vuex'
    export default {

	    computed:{
		    ...mapState({
			    user: state => state.AuthUser
		    })
	    }
    }
</script>
